<template>
  <div class="list-content">
    <el-row type="flex" justify="space-between">
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        @submit.native.prevent
      >
        <el-form-item v-if="isMuilUnitUser">
          <el-select
            filterable
            @change="getList(1)"
            v-model="formInline.organizationId"
            placeholder="请选择业主单位"
          >
            <el-option
              v-for="item in orgOptions"
              :key="item.organizationId"
              :label="item.shortName"
              :value="item.organizationId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            class="form-search-btn"
            v-if="isMuilUnitUser"
            type="primary"
            @click="getList(1)"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div class="more-btns">
        <el-button type="primary" @click="addPlan">新增</el-button>
      </div>
    </el-row>
    <el-table
      v-loading="loading"
      :data="tableData"
      ref="mainTable"
      style="width: 100%"
    >
      <el-table-column label="序号" type="index" width="50"> </el-table-column>
      <el-table-column prop="serverId" label="用户传输装置服务标识">
      </el-table-column>
      <el-table-column prop="model" label="型号"> </el-table-column>
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">{{
          mapStatus(scope.row.status)
        }}</template>
      </el-table-column>
      <el-table-column prop="lastTime" label="最近上传时间"> </el-table-column>
      <el-table-column prop="tel" label="联系电话"> </el-table-column>
      <el-table-column prop="isEdgeCalculator" label="是否为边缘一体机">
        <template v-slot="sc">{{sc.row.isEdgeCalculator==1?'是':'否'}}</template>
      </el-table-column>
      <el-table-column prop="remarks" label="备注"> </el-table-column>
      <el-table-column label="操作" width="140">
        <template slot-scope="scope">
          <el-button
            @click="historyDelate(scope.$index, scope.row)"
            type="text"
            size="small"
            >历史详情</el-button
          >
          <span class="dividing-line">|</span>
          <el-button
            @click="addPlan(scope.$index, scope.row)"
            type="text"
            size="small"
            >修改</el-button
          >
          <span class="dividing-line">|</span>
          <el-button
            @click="delPlan(scope.$index, scope.row)"
            type="text"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <el-table-column type="expand" width="1">
        <template slot-scope="scope">
          <el-tabs
            type="border-card"
            :data-row="{ scope }"
          >
            <span style="display:none;">{{ freashFlag }}</span>
            <el-tab-pane data-label="analog">
              <span slot="label">历史详情</span>
              <div>
                <el-table
                  v-loading="showloading"
                  ref="tableDetailList"
                  :data="tableDatail"
                  style="width: 100%">
                  <el-table-column label="序号" type="index" width="50"></el-table-column>
                  <el-table-column label="简介说明" prop="instructions"></el-table-column>
                  <el-table-column label="创建时间" prop="createTime"></el-table-column>
                  <el-table-column label="复位时间" prop="resetTime"></el-table-column>
              </el-table>

                <el-pagination
                  background
                  @size-change="sizeChangeDetail"
                  @current-change="pageChangeDetail"
                  :current-page="formInlineDetail.currentPageIndex"
                  :page-sizes="[10, 50, 100]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="formInlineDetail.currentPageTotal"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
          </el-tabs>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      @size-change="sizeChange"
      @current-change="pageChange"
      :current-page="formInline.currentPageIndex"
      :page-sizes="[10, 50, 100]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formInline.currentPageTotal"
    >
    </el-pagination>
    <el-dialog
      :close-on-click-modal="false"
      title="通信服务器维护"
      width="600px"
      top="10vh"
      v-if="dialogFalg"
      :visible.sync="dialogFalg"
      @close="closeDialog"
      v-dialogDrag
    >
      <edit-form :editInfo="editInfo" :closeDialog="closeDialog"></edit-form>
    </el-dialog>
  </div>
</template>

<script>
import * as Dao from "@/api/dcx";
import { getOrgList } from "@/api/org";
import { getSelfFaultRecordsList } from "@/api/dcx";
import util from "@/utils/util";
import editForm from "./Dialog/UserTransDeviceForm";

export default {
  name: "UserTransDevice",
  props: {
    parames: {
      default() {
        return false;
      }
    }
  },
  components: {
    editForm
  },
  data() {
    return {
      freashFlag:0,
      showloading:true,
      formInline: {
        /*this.$store.state.userinfo.isMuilUnitUser ? this.$store.state.userinfo.organizationIds : */
        organizationId: this.$store.state.userinfo.org.id,
        name: "",
        currentPageSize: 10,
        currentPageIndex: 1,
        currentPageTotal: 0
      },
      formInlineDetail:{
        organizationId: this.$store.state.userinfo.org.id,
        name: "",
        currentPageSize: 10,
        currentPageIndex: 1,
        currentPageTotal: 0
      },
      tableDatail:[],//历史详情
      historyDelateId:{},
      util: util,
      isMuilUnitUser: this.$store.state.userinfo.isMuilUnitUser,
      accountName: this.$store.state.userinfo.accountName,
      defaultImg: this.GLOBAL.defaultImg,
      tableData: [], //表格数据
      detailObj: {}, //展开详情
      loading: false,
      orgOptions: [
        /*{organizationId: this.$store.state.userinfo.organizationIds,shortName: "业主单位"}*/
      ],
      dialogFalg: false,
      editInfo: {} // 编辑对应的表单信息
    };
  },
  watch: {
    '$store.state.listQueryParam'(val){
      if(this.$router.currentRoute.name=='userTransDevice'){
        this.formInline.organizationId = val.organizationId||''
        this.getList()
      }
    }
  },
  created() {
    //绑定下拉框
    getOrgList({ queryType: 0 }).then(data => {
      this.orgOptions.push.apply(this.orgOptions, data.data);
      // if (this.$route.params) {
      //   this.formInline.organizationId = this.$route.params.organizationId || "";
      // } else if (!this.$route.params && this.orgOptions.length > 0) {
        this.formInline.organizationId = this.orgOptions[0].organizationId;
      // }
      this.getList();
    });
  },
  methods: {
    mapStatus(code) {
      let MapList = {
        "0": "离线",
        "1": "在线"
      };
      return MapList[code] || "";
    },
    historyDelate(index, row){
      // 历史详情
      this.historyDelateId = row
      const $table = this.$refs.mainTable;
      row.isExpand = !row.isExpand; //给row一个自定义展开状态
      $table.toggleRowExpansion(row);
      if (row.isExpand) {
        this.getDetailList(0,10,row);
      }
    },
    getDetailList(_pageIndex,_pageSize){
      let _this = this
      //获取列表
      if (_pageIndex) {
        _this.formInlineDetail.currentPageIndex = _pageIndex;
      }
      if (_pageSize) {
        _this.formInlineDetail.currentPageSize = _pageSize;
      }
      let param = {
        pageIndex: _this.formInlineDetail.currentPageIndex - 1,
        pageSize: _this.formInlineDetail.currentPageSize,
        type:1,
        objId:_this.historyDelateId.serverId
      }
      getSelfFaultRecordsList(param).then((result) => {
        if(result.status == 200){
          _this.formInlineDetail.currentPageTotal = result.total;
          _this.showloading = false
          _this.tableDatail = result.data
        }
      })
    },
    // 页码切换
    sizeChangeDetail(_pageSize){
      this.getDetailList(1, _pageSize);
    },
    // 翻页
    pageChangeDetail(_pageIndex){
      this.getDetailList(_pageIndex);
    },
    sizeChange(_pageSize) {
      //页码切换
      this.getList(1, _pageSize);
    },
    pageChange(_pageIndex) {
      //翻页
      this.getList(_pageIndex);
    },
    getList(_pageIndex, _pageSize) {
      //获取列表
      if (_pageIndex) {
        this.formInline.currentPageIndex = _pageIndex;
      }
      if (_pageSize) {
        this.formInline.currentPageSize = _pageSize;
      }
      this.loading = true;
      Dao.getList({
        organizationId: this.formInline.organizationId,
        pageIndex: this.formInline.currentPageIndex - 1,
        pageSize: this.formInline.currentPageSize
      }).then(result => {
        this.formInline.currentPageTotal = result.total;
        this.tableData = result.data;
        this.loading = false;
      });
    },
    addPlan(index, row) {
      this.dialogFalg = true;
      this.editInfo = row || { organizationId: this.formInline.organizationId };
    },
    delPlan(index, row) {
      let that = this;
      this.$confirm("确定删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        roundButton: true
      })
        .then(() => {
          Dao.del({ serverId: row.serverId }).then(res => {
            if (res.status === 200) {
              that.$message({
                type: "success",
                message: "删除成功!"
              });
              that.getList(1);
            } else {
              that.$message.error(res.info);
            }
          });
        })
        .catch(() => {});
    },
    closeDialog(refresh) {
      this.dialogFalg = false;
      if (refresh) {
        this.getList(this.editInfo.id?'':1);
      }
    }
  }
};
</script>
